<!--
  @Description:个人中心首页
  @author Wangshu
  @date 2019/8/21
-->

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../css/common/bootstrap.min.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/changeData.css">
    <link rel="stylesheet" href="../css/menu.css">
    <link rel="stylesheet" href="../css/common/common.css">
    <title>山科科技园-个人中心</title>
</head>
<body>
<head>
    <div class="top-title">
        <div>
            <span>欢迎登陆山科大技术转移公共服务平台！</span>
            <div class="login">
                <img src="../asset/icon/people.png" alt="">
                <span>登录</span>
                <span class="spece">|</span>
                <span>注册</span>
            </div>
        </div>
    </div>
    <div class="logo-box">
        <div class="logo-wrap">
            <div>
                <img src="../asset/fodder/logo.png" alt="">
            </div>
            <div>
                <div class="search">
                    <div class="dropdown">
                        <div class="btn select-default dropdown-toggle" type="button" id="dropdownMenu1"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            请选择学院
                            <span><img style="width: 20px;" src="../asset/icon/dropdown.png" alt=""></span>
                        </div>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a onclick="shows1($(this).text())">矿业与安全工程学院</a></li>
                            <li><a onclick="shows1($(this).text())">测绘与工程学院</a></li>
                            <li><a onclick="shows1($(this).text())">体育学院</a></li>
                        </ul>
                    </div>
                    <div class="search-block">
                        <input type="text">
                    </div>
                    <div class="submit">
                        <img src="../asset/icon/search.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="nav-box">
        <div class="nav-list">
            <ul>
                <li><a href="./home.html">首页</a></li>
                <li><a href="">新闻</a></li>
                <li><a href="">人才库</a></li>
                <li><a href="">成果库</a></li>
                <li><a href="">需求库</a></li>
                <li class="active"><a href="">联系我们</a></li>
            </ul>
        </div>
    </div>
</head>
<main>
    <div class="content-wrap">
        <div class="menu-left">
            <div class="title">个人中心</div>
            <ul>
                <li class="active">
                    <a href="./me.html">个人资料</a>
                    <img class="active-arrow" src="../asset/icon/right_arrow.png" alt="">
                </li>
                <li><a href="./myPublish.html">我发布的成果</a><img src="../asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./myDemand.html">我发布的需求</a><img src="../asset/icon/right_arrow.png" alt=""></li>
                <li>
                    <a href="./myTeamDetail.html">我的团队</a>
                    <img src="../asset/icon/right_arrow.png" alt="">
                </li>
                <li><a href="./myCollectTalent.html">我的收藏</a><img src="../asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./FAQ.html">常见问题</a><img src="../asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./callMe.html">联系客服</a><img src="../asset/icon/right_arrow.png" alt=""></li>
                <li><a href="./other.html">其他设置</a><img src="../asset/icon/right_arrow.png" alt=""></li>
            </ul>
        </div>
        <div class="menu-right">
            <div class="title">
                <div>个人资料</div>
                <div>当前位置：<span>个人中心/个人资料/修改</span></div>
            </div>
            <div class="content">
                <div class="option">
                    <div>头像：</div>
                    <div class="img-box"><img src="../asset/fodder/header.png" alt=""></div>
                </div>
                <div class="option">
                    <div>姓名：</div>
                    <div class="text-box"><input type="text" placeholder="请输入姓名"></div>
                </div>

                <div class="option">
                    <div>工号：</div>
                    <div class="number-box">20190909</div>
                </div>

                <div class="option">
                    <div>联系方式：</div>
                    <div class="text-box"><input type="text" placeholder="请输入联系方式"></div>
                </div>
                <div class="option">
                    <div>学院：</div>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            请选择学院
                            <span><img style="width: 20px;" src="../asset/icon/dropdown.png" alt=""></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a onclick="shows1($(this).text())">矿业与安全工程学院</a></li>
                            <li><a onclick="shows1($(this).text())">测绘与工程学院</a></li>
                            <li><a onclick="shows1($(this).text())">体育学院</a></li>
                        </ul>
                    </div>
                </div>
                <div class="option">
                    <div>专业：</div>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            请选择专业
                            <span><img style="width: 20px;" src="../asset/icon/dropdown.png" alt=""></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a onclick="shows2($(this).text())">矿业与安全</a></li>
                            <li><a onclick="shows2($(this).text())">测绘与工程</a></li>
                            <li><a onclick="shows2($(this).text())">地球与科学</a></li>
                        </ul>
                    </div>
                </div>
                <div class="option add">
                    <div>标签：</div>
                    <div class="text-box new-tag"><input type="text" placeholder="新建标签"></div>
                    <img id="addTag" src="../asset/icon/add.png" alt="">
                </div>
                <div class="option tag-wrap">
                    <div>自主标签：</div>
                    <div class="tag-box">
                        <ul>
                            <li class="active">博士生导师</li>
                            <li>教授</li>
                            <li>研究员</li>
                            <li>副教授</li>
                            <li>泰安校区管委会常务副主任</li>
                        </ul>
                    </div>
                </div>
                <div class="option intro-wrap">
                    <div>个人简介：</div>
                    <div class="intro-box"><textarea name="" id="" cols="60" rows="7" placeholder="请输入个人简介"></textarea>
                    </div>
                </div>
                <div class="save">
                    <div id="save">保存</div>
                    <div id="update">更新到人才库</div>
                </div>
            </div>

        </div>
    </div>
</main>
<footer>
    <div class="foot-line">
        <span>青岛校区地址：山东省青岛市黄岛区前湾港路579号</span>
        <span>邮政编码：266590</span>
        <span>联系电话：0532-80698028\80698027\80678029</span>
        <span>传真：0532-80698029</span>
    </div>
    <div class="foot-line">
        <span>泰安校区地址：山东省泰安市岱宗大街223号</span>
        <span>邮政编码：271019</span>
        <span>联系电话：0538-3076489</span>
        <span>传真：0538-3076489</span>
    </div>
    <div class="last-line">
        Copyright©2019 　山东科技大学 　鲁ICP备09051012号
    </div>
</footer>
<div class="pop-box">
    <div class="pop">
        <img class="close" src="../asset/icon/close.png" alt="">
        <div class="logo"><img src="../asset/icon/success.png" alt=""></div>
        <p id="popText">您的个人资料保存成功</p>
        <div class="affirm">
            <div id="affirmBtn">确定</div>
        </div>
    </div>
</div>
<script src="../js/public/jquery-1.11.3.min.js"></script>
<script src="../js/public/bootstrap.min.js"></script>
<script src="../js/layer/layer/layer.js"></script>
<script>
    $('#save').on('click', function () {
        layer.msg('请输入', {
            time: 1500,
        });
    });

    $('#update').on('click', function () {
        $('.pop-box').css('display', 'block')
        $('#popText').text('您在人才库更新成功！')
    })

    $('#affirmBtn').on('click', function () {
        $('.pop-box').css('display', 'none')
    })

    $('.close').click(function () {
        $('.pop-box').css('display', 'none')
    })

    $('.dropdown-toggle').dropdown()

    function shows1(a) {
        $("#dropdownMenu1").text(a);
    }

    function shows2(a) {
        $("#dropdownMenu2").text(a);
    }

    $(".tag-box ul li").click(function () {
        let status = $(this).hasClass("active")
        if (status === false) {
            $(this).addClass('active')
        } else {
            $(this).removeClass('active')
        }
    });
</script>
</body>
</html>

